<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>沙丘基础卡牌战力图</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="cards.js"></script>
    <script src="render.js"></script>
</head>

<body style="background-color: #100C2A;">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div><h2 style="text-align:center;color:#eeeeee">沙丘基础卡牌战力图</h2></div>
    <div><h5 style="text-align:center;color:#f1e0a8;cursor: pointer;margin-bottom: 5px;" onclick="window.open('https://space.bilibili.com/8125872','_blank');"><a>西柚西工具人开发</a></h5></div>
    <div><h6 style="text-align:center;color:#eeeeee;cursor: pointer;margin-top: 5px;" onclick="window.open('https://gitee.com/bunkergames','_blank');"><a>gitee-link:mrhitman</a></h6></div>   
    <div style="display: flex;justify-content: center;">
        <div style="margin-right: 5px; margin-top: 100px;width: 200px;float: left;">
            <img id="img_cardA" src="./image/dune_img_back.png" width="200px">
            <select id="cardsList_A" onchange="selectCardA(this)" style="width: 200px;">
                <option value="" disabled selected style="display: none;">选择卡牌A</option>
            </select>
        </div>
        <div style="margin-right: 5px; width: 500px; float: left;">
            <div id="main" style="width: 500px;height:500px;"></div>
        </div>
        <div style="margin-right: 5px;margin-top: 100px;width: 200px;float: left;">
            <img id="img_cardB" src="./image/dune_img_back.png" width="200px">
            <select id="cardsList_B" onchange="selectCardB(this)" style="width: 200px;">
                <option value="" disabled selected style="display: none;">选择对照卡牌B</option>
            </select>
        </div>
    </div>
    <div style="text-align:center;">
        <h5 style="color:aquamarine">喜欢的话，帮UP主攒一个新桌游吧~</h5>
        <img src="./image/ds.png" width="150px">
    </div>

    <script type="text/javascript">

        var render = new Render(cards);
        render.fillSelectList();
        render.create();

        function selectCardA(item)
        {
            let selectedIndex = item.selectedIndex;
            let idx =  item.options[selectedIndex].value
            render.analyze(idx,0);
        }
        function selectCardB(item)
        {
            let selectedIndex = item.selectedIndex;
            let idx =  item.options[selectedIndex].value
            render.analyze(idx,1);         
        }
        

    </script>
</body>

</html>